<template>
  <div class="search-input">
    <el-input
      v-model="paramsForm.id"
      placeholder="请输入流程id"
      style="width: 200px; margin-left: 10px"
    ></el-input>
    <el-button type="primary" style="margin-left: 10px" @click="searchById">
      搜索
    </el-button>

    <el-select
      v-model="paramsForm.status"
      placeholder="流程状态"
      style="width: 120px; margin-left: 60px"
    >
      <el-option label="已投递" :value="1"></el-option>
      <el-option label="已查看" :value="2"></el-option>
      <el-option label="面试邀约" :value="3"></el-option>
      <el-option label="不合适" :value="4"></el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px" @click="searchByStatus">
      搜索
    </el-button>

    <el-button type="warning" style="margin-left: 120px" @click="reset">
      重置
    </el-button>
  </div>
  <div class="recruitProcess-table">
    <el-table
      class="recruitProcessTable"
      :data="recruitProcessData"
      :border="false"
    >
      <el-table-column prop="id" label="流程ID" width="80"></el-table-column>
      <el-table-column prop="jobId" label="职位ID" width="80"></el-table-column>
      <el-table-column
        prop="resumeId"
        label="简历ID"
        width="80"
      ></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template v-slot="{ row }">
          <el-tag
            :type="
              row.status === 1
                ? 'info'
                : row.status === 2
                ? 'warning'
                : row.status === 3
                ? 'success'
                : 'danger'
            "
          >
            {{
              row.status === 1
                ? '已投递'
                : row.status === 2
                ? '已查看'
                : row.status === 3
                ? '面试邀约'
                : '不合适'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="160"
      ></el-table-column>
      <el-table-column prop="feedback" label="反馈"></el-table-column>
      <el-table-column label="操作" min-width="100px">
        <template v-slot="{ row }">
          <div class="button">
            <el-button
              size="small"
              @click="openViewDetailDialog(row)"
              type="primary"
            >
              查看简历
            </el-button>
            <el-button
              size="small"
              @click="openUpdateDialog(row)"
              type="danger"
            >
              更新招聘流程
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="paramsForm.pageNum"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="paramsForm.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
  <el-dialog v-model="showViewDetailDialog" title="查看简历详情" width="800">
    <el-tabs
      class="tab-container"
      v-model="activeName"
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="个人简历" name="first">
        <el-form
          :model="resumeData"
          ref="resumeForm"
          label-width="100px"
          class="companyInformationJobDetailData"
        >
          <el-row>
            <el-col :span="10">
              <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="resumeData.realname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="性别" prop="gender">
                <el-select
                  v-model="resumeData.gender"
                  placeholder="请选择活动区域"
                >
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="出生日期" required>
                <el-form-item prop="birthdate">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="resumeData.birthdate"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="求职状态" prop="status">
                <el-select
                  v-model="resumeData.status"
                  placeholder="请选择求职状态"
                >
                  <el-option label="正在找工作" :value="1"></el-option>
                  <el-option label="考虑机会" :value="2"></el-option>
                  <el-option label="暂不考虑" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="resumeData.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="resumeData.phone"></el-input>
            </el-form-item>
            <el-col :span="10"></el-col>
          </el-row>
          <el-form-item label="当前城市" prop="currentCity">
            <el-input v-model="resumeData.currentCity"></el-input>
          </el-form-item>
          <el-form-item label="优点" prop="advantage">
            <el-input v-model="resumeData.advantage"></el-input>
          </el-form-item>
          <el-form-item label="工作经历" prop="workExperience">
            <v-md-editor
              style="height: 500px"
              v-model="resumeData.workExperience"
              mode="edit"
            ></v-md-editor>
          </el-form-item>
          <el-form-item label="项目经历" prop="projectExperience">
            <v-md-editor
              v-model="resumeData.projectExperience"
              mode="edit"
            ></v-md-editor>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="教育经历" name="second">
        <el-form
          :model="educationJobDetailData"
          ref="educationForm"
          label-position="top"
        >
          <el-row>
            <el-col :span="10">
              <el-form-item label="学校名称" prop="educationExperience">
                <el-input
                  v-model="educationJobDetailData.school_name"
                  placeholder="请输入学校名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="专业" prop="major">
                <el-input
                  v-model="educationJobDetailData.major"
                  placeholder="请输入专业"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="学制类型" prop="type">
                <el-radio-group v-model="educationJobDetailData.type">
                  <el-radio :label="1">全日制</el-radio>
                  <el-radio :label="2">非全日制</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="学历" prop="education">
                <el-select
                  v-model="educationJobDetailData.eduction"
                  placeholder="请选择学历"
                >
                  <el-option label="高中及以下" :value="1"></el-option>
                  <el-option label="大专" :value="2"></el-option>
                  <el-option label="本科" :value="3"></el-option>
                  <el-option label="硕士" :value="4"></el-option>
                  <el-option label="博士" :value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="入学年份" prop="enrollmentYear">
                <el-input
                  v-model="educationJobDetailData.enrollment_year"
                  placeholder="请填写入学年份"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="毕业年份" prop="graduationYear">
                <el-input
                  v-model="educationJobDetailData.graduation_year"
                  placeholder="请填写毕业年份"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="在校经历" prop="schoolExperience">
            <el-input
              v-model="educationJobDetailData.school_experience"
              type="textarea"
              placeholder="请输入在校经历"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="求职期望" name="third">
        <el-form :model="expectForm" ref="expectForm" label-position="top">
          <el-form-item label="求职类型" prop="type">
            <el-radio-group v-model="expectJobDetailData.type">
              <el-radio :label="1">全职</el-radio>
              <el-radio :label="2">兼职</el-radio>
              <el-radio :label="3">实习生</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="10">
              <el-form-item label="期望职业标签" prop="job_tag">
                <el-select
                  v-model="expectJobDetailData.job_tag"
                  placeholder="请选择期望职业标签"
                >
                  <el-option label="程序员" :value="1"></el-option>
                  <el-option label="公务员" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="期望行业" prop="industry_id">
                <el-select
                  v-model="expectJobDetailData.industry_id"
                  placeholder="请选择期望职业标签"
                >
                  <el-option label="it行业" :value="1"></el-option>
                  <el-option label="金融行业" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="期望城市" prop="city">
                <el-input
                  v-model="expectJobDetailData.city"
                  placeholder="请选择期望城市"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="10">
              <el-form-item label="其他城市" prop="other_city">
                <el-input
                  v-model="expectJobDetailData.other_city"
                  placeholder="请选择其他城市"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最低薪资（单位：K）" prop="min_salary">
                <el-input-number
                  v-model="expectJobDetailData.min_salary"
                  :min="1"
                  label="请选择最低薪资"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高薪资（单位：K）" prop="max_salary">
                <el-input-number
                  v-model="expectJobDetailData.max_salary"
                  :min="1"
                  label="请选择最高薪资"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane> -->
      <el-tab-pane label="应聘职位" name="fourth">
        <el-form :model="JobDetailData" label-width="100px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="职位名称：">
                <span>{{ JobDetailData.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="10">
              <el-form-item label="HR ID：">
                <span>{{ JobDetailData.hrid }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="工作地点：">
                <span>{{ JobDetailData.location }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="10">
              <el-form-item label="总浏览量：">
                <span>{{ JobDetailData.viewNum }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="职位描述：">
            <span>{{ JobDetailData.description }}</span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <el-dialog v-model="showUpdateJobDialog" title="更新招聘流程" width="600">
    <el-form :model="updateRecruitProcessForm" label-width="120px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="流程ID">
            <span>{{ updateRecruitProcessForm.id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="10">
          <el-form-item label="职位ID">
            <span>{{ updateRecruitProcessForm.JobId }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="简历ID">
            <span>{{ updateRecruitProcessForm.resumeId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="10">
          <el-form-item label="状态" prop="status">
            <el-select v-model="updateRecruitProcessForm.status">
              <el-option label="已投递" :value="1"></el-option>
              <el-option label="已查看" :value="2"></el-option>
              <el-option label="面试邀约" :value="3"></el-option>
              <el-option label="不合适" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="反馈" prop="feedback" style="margin-left: -10px">
        <el-input
          type="textarea"
          style="width: 380px"
          v-model="updateRecruitProcessForm.feedback"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateRecruitProcess">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElTable } from 'element-plus'
import { useUserStoreHook } from '@/store/modules/user'
import { ElMessage } from 'element-plus'
import {
  getRecruitProcessGetrecruitProcessById,
  getSysResumeFindByResumeIdById,
  putRecruitProcessUpdate,
} from '@/servers/controller'

const userStore = useUserStoreHook()

const activeName = ref('first')

onMounted(() => {
  loadData()
})

const loadData = async () => {
  if (userStore.userInfo.id != undefined) {
    const res = await getRecruitProcessGetrecruitProcessById({
      id: userStore.userInfo.id,
    })
    if (res.data.code === 200) {
      // @ts-ignore
      recruitProcessData.value = res.data.data
    } else {
      ElMessage.success('获取失败')
    }
  }
}

const updateRecruitProcess = async () => {
  updateRecruitProcessForm.value.createTime = ''
  const res = await putRecruitProcessUpdate(updateRecruitProcessForm.value)
  if (res.data.code === 200) {
    // ElMessage.success("更新成功");
    showUpdateJobDialog.value = false
    loadData()
  } else {
    ElMessage.error('更新失败')
  }
}

interface RecruitmentProcess {
  id: number
  JobId: number
  resumeId: number
  status: number
  feedback: string
  createTime: string
}

const updateRecruitProcessForm = ref({
  id: undefined,
  JobId: undefined,
  resumeId: undefined,
  status: undefined,
  feedback: '',
  createTime: '',
})

const addJobForm = ref({
  id: null,
  hr_id: null,
  name: '',
  description: '',
  location: '',
  education: 1,
  experience: 1,
  type: 1,
  tag: 1,
  other_tag: '',
  min_salary: 1,
  max_salary: 1,
  status: 1,
  createTime: '',
})

const paramsForm = ref({
  pageSize: 10,
  pageNum: 1,
  id: undefined,
  status: undefined,
})

let resumeForm = ref()
const resumeData = ref({
  id: 0,
  userId: 0,
  realname: '',
  gender: 1,
  birthdate: '',
  currentCity: '',
  email: '',
  phone: '',
  status: 1,
  advantage: '',
  workExperience: '',
  projectExperience: '',
})

let educationForm = ref()
const educationJobDetailData = reactive({
  resumeId: null,
  school_name: '',
  type: 1,
  eduction: 1,
  major: '',
  enrollment_year: '',
  graduation_year: '',
  school_experience: '',
})

let expectForm = ref()
const expectJobDetailData = reactive({
  resumeId: null,
  type: 1,
  job_tag: 1,
  city: '',
  other_city: '',
  min_salary: 1,
  max_salary: 1,
  industry_id: 1,
})

const JobDetailData = ref({
  name: '',
  description: '',
  location: '',
  viewNum: '',
  hrid: undefined,
})

const handleClick = () => {
  console.log('tab click')
}

const showUpdateJobDialog = ref(false)
const showViewDetailDialog = ref(false)
const total = ref(10)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<RecruitmentProcess[]>([])
const toggleSelection = (rows?: RecruitmentProcess[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: RecruitmentProcess[]) => {
  multipleSelection.value = val
}

const openUpdateDialog = (row: any) => {
  showUpdateJobDialog.value = true
  updateRecruitProcessForm.value = { ...row }
}

const openViewDetailDialog = async (row: any) => {
  //更新招聘流程状态为已查看
  if (row.status === 1) {
    updateRecruitProcessForm.value = { ...row }
    // @ts-ignore
    updateRecruitProcessForm.value.status = 2
    updateRecruitProcess()
  }
  showViewDetailDialog.value = true
  console.log('row:' + row.jobVo.name)
  //获取职位详情
  JobDetailData.value = row.jobVo
  //获取简历详情
  const resumeId = parseInt(row.resumeId)
  const res = await getSysResumeFindByResumeIdById({ id: resumeId })
  if (res.data.code === 200) {
    resumeData.value = res.data.data
  } else {
    ElMessage.error('获取失败')
  }
}

const deleteJob = (row: any) => {
  console.log('jobId:', row.id)
  console.log('deleteJob')
}

const deleteSelected = () => {
  if (multipleTableRef.value != null) {
    let tableData = multipleTableRef.value.getSelectionRows()
    for (let row of tableData) {
      console.log('选中的行数据:', row.id)
    }
  }
  console.log('删除失败')
}

const handleSizeChange = (val: number) => {
  paramsForm.value.pageSize = val
}

const handleCurrentChange = (val: number) => {
  paramsForm.value.pageNum = val
}

const updateSubmit = () => {
  console.log('update submit')
}

const addSubmit = () => {
  console.log('update submit:', addJobForm.value)
}

const searchById = () => {
  console.log('search by id:', paramsForm.value.id)
}

const searchByStatus = () => {
  console.log('search by status:', paramsForm.value.status)
}

const reset = () => {
  paramsForm.value.status = undefined
  paramsForm.value.id = undefined
  console.log("paramsForm's value:", paramsForm.value)
}

const recruitProcessData = ref([
  {
    id: 1,
    JobId: 101,
    resumeId: 201,
    status: 1,
    feedback: '',
    createTime: '2022-01-01 09:00:00',
  },
  {
    id: 2,
    JobId: 102,
    resumeId: 202,
    status: 2,
    feedback: '已查看',
    createTime: '2022-02-15 14:30:00',
  },
  {
    id: 3,
    JobId: 103,
    resumeId: 203,
    status: 3,
    feedback: '面试通过',
    createTime: '2022-03-28 11:45:00',
  },
])
</script>

<style scoped lang="scss">
p {
  font-size: 17px;
}

.recruitProcess-table {
  display: flex;
  justify-content: center;
  align-items: center;
}

.recruitProcessTable {
  width: 70%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button {
  display: flex;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}

.search-input {
  display: flex;
  margin-left: 220px;
  margin-top: 20px;
}
</style>
